
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>SUI Mobile Demo</title>
    <meta name="description" content="MSUI: Build mobile apps with simple HTML, CSS, and JS components.">
    <meta name="author" content="aaa">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">


<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//m.sui.taobao.org/assets/js/demos.js' charset='utf-8'></script>

<script>

</script>




    <style type="text/css">

        a {
            color: #ffffff;
        }
        a:visited {
        text-decoration: none;
        }
        a:active {
            color: #FFAA33;
        }
        .search-input input {
            background-color: #181b20;
            border: 0px;
            border-radius:25px;
        }

        .theme-dark .searchbar {
            background: #333;
        }
        .swiper-container {
            padding-bottom: 0px;
        }

        #category-head{width:100%;display: inline;white-space: nowrap;overflow-x:scroll;float:left;overflow-y:hidden}
        #category-head li{display:inline-block;width:80px;height:30px;padding-left:10px;}

        .flex i{
            background: url(/img/icon.png) no-repeat;
            display: inline;
            width: 20px;
            height: 20px;
            float: left;
        }

        ul, menu, dir {
            -webkit-padding-start: 0px;
        }

        .sp_1 i{background-position: 0px 0px;}
        .sp_2 i{background-position: 0px -22px; }
        .sp_3 i{background-position: 0px -44px;}
        .sp_4 i{background-position: 0px -66px;}
        .sp_5 i{background-position: 0px -88px;}
        .sp_6 i{background-position: 0px -110px;}
        .sp_7 i{background-position: 0px -132px;}
        .sp_8 i{background-position: 0px -154px;}
        .sp_9 i{background-position: 0px -176px;}
        .sp_10 i{background-position: 0px -198px;}
        .sp1_1 i{background-position: -22px 0px;}
        .sp1_2 i{background-position: -22px -22px;}
        .sp1_3 i{background-position: -22px -44px;}
        .sp1_4 i{background-position: -22px -66px;}
        .sp1_5 i{background-position: -22px -88px;}
        .sp1_6 i{background-position: -22px -110px;}
        .sp1_7 i{background-position: -22px -132px;}
        .sp1_8 i{background-position: -22px -154px;}
        .sp1_9 i{background-position: -22px -176px;}

        hr{
            margin: 0px;
            width: 100%;
            height: 8px;
            border: 0px;
            background-color: #008C9E;
            border-top: #181b20 2px;
            border-bottom: #181b20 2px;
        }

        .list-block {
            margin: 0;
            font-size: .85rem;
        }
        .list-block .item-inner{
            padding-top: 1rem;
        }

        .list-block .item-content{
            padding-left: 0rem;
        }
        .item-title{
            height: 100px;
            width: 4px;
            background-color: #EA8511;
        }

    </style>



</head>
<body class="theme-dark">
<div class="page-group">
    <div id="page-swiper" class="page">
            <header class="bar bar-nav">
                <div class="searchbar">
                    <div class="search-input">
                        <label class="icon icon-search" for="search"></label>
                        <input type="search" id='search' placeholder='输入关键字...'/>
                    </div>
                </div>
            </header>
        <div class="content">
            <!-- 这里是页面内容区 -->
            <div class="swiper-container" data-space-between='10'>
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="http://101.201.122.79:8083/Images/upload/videoPhoto/596adcc774c36b070e69ec90.jpg" alt="" style='width: 100%'></div>
                    <div class="swiper-slide"><img src="http://101.201.122.79:8083/Images/upload/videoPhoto/596adcb874c36b070e69ec8f.jpg" alt="" style='width: 100%'></div>
                    <div class="swiper-slide"><img src="http://101.201.122.79:8083/Images/upload/videoPhoto/596adca774c36b070e69ec8e.jpg" alt="" style='width: 100%'></div>
                </div>
                <div class="swiper-pagination"></div>
            </div>


            <ul class="flex-layout category-head" id="category-head" style="">
                <li class="flex sp_1"  id="brand_cat" searchtype="brand"><a href="#"><i></i>喜剧片</a></li>
                <li class="flex sp_2"  ><a href="#"><i></i>悬疑片</a></li>
                <li class="flex sp_3"  ><a href="#"><i></i>爱情片</a></li>
                <li class="flex sp_4"  ><a href="#"><i></i>剧情片</a></li>
                <li class="flex sp_5"  ><a href="#"><i></i>奇幻片</a></li>
                <li class="flex sp_6"  ><a href="#"><i></i>犯罪片</a></li>
                <li class="flex sp_7"  ><a href="#"><i></i>传记片</a></li>
                <li class="flex sp_8"  ><a href="#"><i></i>歌舞片</a></li>
                <li class="flex sp_9"  ><a href="#"><i></i>古装片</a></li>
                <li class="flex sp_10"  ><a href="#"><i></i>伦理片</a></li>
                <li class="flex sp1_1"  ><a href="#"><i></i>科幻片</a></li>
                <li class="flex sp1_2"  ><a href="#"><i></i>动作片</a></li>
                <li class="flex sp1_3"  ><a href="#"><i></i>恐怖片</a></li>
                <li class="flex sp1_4"  ><a href="#"><i></i>惊悚片</a></li>
                <li class="flex sp1_5"  ><a href="#"><i></i>战争片</a></li>
                <li class="flex sp1_6"  ><a href="#"><i></i>记录片</a></li>
                <li class="flex sp1_7"  ><a href="#"><i></i>动画片</a></li>
                <li class="flex sp1_8"  ><a href="#"><i></i>历史片</a></li>
                <li class="flex sp1_9"  ><a href="#"><i></i>文艺片</a></li>

            </ul>
            <hr />
            <div class="list-block">
                <ul>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title"><i></i>爱情片</div>

                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title">标题</div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title">标题</div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title">标题</div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title">标题</div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title">标题</div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title">标题</div>
                        </div>
                    </li>
                </ul>

        </div>
    </div>
</div>



</body>
</html>